<template>
	<view>
		<view class="data-box">
			<view class="form-block">
				<view class="card">
					<view class="card-body">
						<u--form
						class="from-card"
						labelPosition="left"
						labelWidth="80"
						:model="info"
						:rules="rules"
						ref="form1">
							<u-form-item
							label="所属项目"
							prop="projectName"
							required
							@click="gotoPage('/subPackTask/taskButler/chooseProject')"
							borderBottom>
								<u--input
									v-if="!info.projectName"
									disabled
									disabledColor="#ffffff"
									suffixIcon="arrow-right"
									v-model="info.projectName"
									placeholder="请选择"
									inputAlign="right"
									border="none">
								</u--input>
								<u--textarea
									v-if="info.projectName"
									autoHeight
									border="none"
									v-model="info.projectName">
								</u--textarea>
							</u-form-item>
							<u-form-item
							label="甲方公司"
							borderBottom>
								<u--input
								v-model="info.firstCompany"
								placeholder="请填写甲方公司"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item
							label="甲方联系人"
							borderBottom>
								<u--input
								v-model="info.firstContacts"
								placeholder="请填写甲方联系人"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item
							label="甲方联系方式"
							labelWidth="100"
							borderBottom>
								<u--input
								v-model="info.firstPhone"
								placeholder="请填写甲方联系方式"
								type="number"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item label="任务标题" prop="taskName" required borderBottom>
								<u--textarea
									autoHeight
									border="none"
									placeholder="请输入"
									v-model="info.taskName">
								</u--textarea>
								<!-- <u--input
								v-model="info.taskName"
								placeholder="请输入"
								inputAlign="right"
								border="none"
								></u--input> -->
							</u-form-item>
							<u-form-item label="任务描述" borderBottom>
								<u--textarea
								v-model="info.describe"
								placeholder="请输入内容" >
								</u--textarea>
							</u-form-item>
							<!-- <u-form-item label="相关文件" borderBottom>
								<u-upload
								:fileList="fileList"
								@afterRead="afterRead"
								@delete="deletePic"
								name="2"
								multiple
								:maxCount="10"
								accept="all">
								</u-upload>
							</u-form-item> -->
							<u-form-item
							label="任务开始时间"
							prop="beginTimeName"
							labelWidth="100"
							required
							@click="dateShow = true;dateField = 'beginTime';"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								placeholder="请选择"
								v-model="info.beginTimeName"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item
							label="任务结束时间"
							prop="endTimeName"
							labelWidth="100"
							required
							@click="dateShow1 = true;dateField = 'endTime';"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								placeholder="请选择"
								v-model="info.endTimeName"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<!-- <u-form-item
							label="任务时间"
							prop="rwTime"
							required
							@click="dateShow = true;dateField = 'rwTime'"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								placeholder="请选择"
								v-model="info.rwTime"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item> -->
							<u-form-item
							label="负责人"
							prop="fzrName"
							required
							@click="gotoPage('/subPackTask/taskButler/chooseFzr')"
							borderBottom>
								<u--input
								disabled
								disabledColor="#ffffff"
								suffixIcon="arrow-right"
								v-model="info.fzrName"
								placeholder="请选择"
								inputAlign="right"
								border="none">
								</u--input>
							</u-form-item>
							<u-form-item
							label="参与人"
							borderBottom>
								<view class="card-plus-t cc-t">
									<view class="card-plus-s plus-style"
										@click="gotoPage('/components/choose-user/choosePer?type=任务管家参与人&chooseUsers='+JSON.stringify(cyrUsers))">
										<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
									</view>
									<view class="pers-list" v-if="cyrUsers.length<4">
										<view class="per-list" v-for='(it,i) in cyrUsers' :key='i'>
											<view class="pers-pic">
												<u-avatar :text="it.userName.slice(1)"
													:fontSize="it.userName.length > 2?12:15" shape="square" size="35"
													bgColor="#0087FC">
												</u-avatar>
											</view>
											<text class="pers-name">{{it.userName}}</text>
											<view class="pers-icon" v-if="i!=2">
												<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
											</view>
										</view>
									</view>
									
									<view class="pers-list" v-else>
										<view class="per-list"
											@click="gotoPage('/components/choose-user/addMore?type=任务管家参与人&chooseUsers='+JSON.stringify(cyrUsers))">
											<view class="" style="text-align: -webkit-right;">
												<view class="pers-pic">
													<u-avatar icon="account" shape="square" size="35" bgColor="#0087FC">
														<u-icon name="account" color="#ffffff" size="50rpx"></u-icon>
													</u-avatar>
												</view>
												<text class="pers-name all-users">查看全部</text>
											</view>
											<view class="pers-icon" style="left: 108rpx;">
												<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
											</view>
										</view>
										<view class="per-list" v-for='(it,i) in cyrUsers.slice(-2)' :key='i'>
											<view class="pers-pic">
												<u-avatar :text="it.userName.slice(1)"
													:fontSize="it.userName.length > 2?12:15" shape="square" size="35"
													bgColor="#0087FC">
												</u-avatar>
											</view>
											<text class="pers-name">{{it.userName}}</text>
											<view class="pers-icon" v-if="i!=1">
												<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
											</view>
										</view>
									</view>
								</view>
							</u-form-item>
							<u-form-item
							label="完成审批人"
							required
							borderBottom>
								<view class="card-plus-t user-t">
									<view class="card-plus-f plus-style"
										@click="gotoPage('/components/choose-user/choosePer?type=任务管家审批人&chooseUsers='+JSON.stringify(sprUsers))">
										<uni-text class="span-style">
											<span>*</span>
										</uni-text>
										<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
									</view>
									<view class="pers-list" v-if="sprUsers.length<4">
										<view class="per-list" v-for='(it,i) in sprUsers' :key='i'>
											<view class="pers-pic">
												<u-avatar :text="it.userName.slice(1)"
													:fontSize="it.userName.length > 2?12:15" shape="square" size="35"
													bgColor="#0087FC">
												</u-avatar>
											</view>
											<text class="pers-name">{{it.userName}}</text>
											<view class="pers-icon" v-if="i!=2">
												<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
											</view>
										</view>
									</view>
									
									<view class="pers-list" v-else>
										<view class="per-list"
											@click="gotoPage('/components/choose-user/addMore?type=任务管家审批人&chooseUsers='+JSON.stringify(sprUsers))">
											<view class="" style="text-align: -webkit-right;">
												<view class="pers-pic">
													<u-avatar icon="account" shape="square" size="35" bgColor="#0087FC">
														<u-icon name="account" color="#ffffff" size="50rpx"></u-icon>
													</u-avatar>
												</view>
												<text class="pers-name all-users">查看全部</text>
											</view>
											<view class="pers-icon" style="left: 108rpx;">
												<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
											</view>
										</view>
										<view class="per-list" v-for='(it,i) in sprUsers.slice(-2)' :key='i'>
											<view class="pers-pic">
												<u-avatar :text="it.userName.slice(1)"
													:fontSize="it.userName.length > 2?12:15" shape="square" size="35"
													bgColor="#0087FC">
												</u-avatar>
											</view>
											<text class="pers-name">{{it.userName}}</text>
											<view class="pers-icon" v-if="i!=1">
												<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
											</view>
										</view>
									</view>
								</view>
							</u-form-item>
						</u--form>
					</view>
				</view>
			</view>
		</view>
		<view class="submit-button">
			<view class="submit-block" @click="submit()">
				保存
			</view>
		</view>
		
		<!-- <u-calendar
			:show="dateShow"
			:minDate="minDate"
			mode="range"
			round="20"
			monthNum="4"
			:allowSameDay="true"
			:closeOnClickOverlay="true"
			@close="dateShow = false"
			@confirm="confirm">
		</u-calendar> -->
		
		<u-datetime-picker
			:show="dateShow"
			v-model="nowDate"
			@cancel="dateShow = false"
			@confirm="timeConfirm"
			mode="datetime">
		</u-datetime-picker>
		<u-datetime-picker
			:show="dateShow1"
			v-model="nowDate1"
			@cancel="dateShow1 = false"
			@confirm="timeConfirm1"
			mode="datetime">
		</u-datetime-picker>
	</view>
</template>

<script>
	import { list } from '@/api/oaProjectInfo.js'
	import { add } from '@/api/task.js'
	import { uploadFile,removeByOssId } from '@/api/upload'
	import { strFormatMinutes, dateToTimestamp, strFormatMinutesNoEightH } from '@/utils/format.js'
	export default {
		data() {
			return {
				minDate:new Date() - 30*24*60*60*1000,
				info:{
					projectName:'',
					fzrName:'',
					fileList:[],
				},
				fileList:[],
				dateField:'',
				nowDate: Number(new Date()),
				nowDate1: Number(new Date()),
				dateShow:false,
				dateShow1:false,
				cyrUsers:[],
				sprUsers:[],
				pickShow:false,
				columns:[],
				pickField:'',
				pickFieldName:'',
				rules:{
					'projectName': {
						required: true,
						message: '请选择所属项目',
						trigger: ['change']
					},
					'taskName': {
						required: true,
						message: '请输入任务标题',
						trigger: ['blur', 'change']
					},
					// 'describe': {
					// 	required: true,
					// 	message: '请输入任务描述',
					// 	trigger: ['blur', 'change']
					// },
					'beginTimeName': {
						required: true,
						message: '请选择任务开始时间',
						trigger: ['change']
					},
					'endTimeName': {
						required: true,
						message: '请选择任务结束时间',
						trigger: ['change']
					},
					'fzrName': {
						required: true,
						message: '请选择负责人',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad() {
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			submit(){
				// 任务参与人
				let cyrList = []
				this.cyrUsers.forEach(e=>{
					cyrList.push(
						{
							cyrId:e.userId,
							cyrName:e.userName
						}
					)
				})
				this.info.cyrList = cyrList
				// 审批人
				let sprList = []
				this.sprUsers.forEach(e=>{
					sprList.push(
						{
							userId:e.userId,
							userName:e.userName
						}
					)
				})
				this.info.sprList = sprList
				if(sprList.length<1){
					uni.showToast({ title: '请选择完成审批人', icon: 'none' })
					return
				}
				this.$refs.form1.validate().then(res => {
					this.addTask()
				}).catch(errors => {
					uni.$u.toast('请将信息填写完整')
				})
			},
			async addTask(){
				const { data } = await add(this.info);
				if(data.code == 200){
					uni.showToast({ title: '添加任务成功', icon: 'none' })
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}else{
					uni.showToast({ title: data.msg, icon: 'none' })
				}
			},
			setChooseUsers(e){
				this.cyrUsers = e
			},
			setChooseSpUsers(e){
				this.sprUsers = e
			},
			setProject(item){
				if(item.type == '项目'){
					this.info.projectName = item.name
					this.info.projectId = item.id
					this.info.fzrName = item.fzrName
					this.info.fzrId = item.fzrId
					this.info.beginTimeName = strFormatMinutesNoEightH(item.jlTime)
					this.info.beginTime = dateToTimestamp(item.jlTime)
					this.info.firstCompany = item.firstCompany
					this.info.firstContacts = item.firstContacts
					this.info.firstPhone = item.firstPhone
					// 复制剪贴板
					uni.setClipboardData({
						data: item.name, 
						success: () => {
							// setTimeout(() => {
							// 	uni.showToast({
							// 		title: '项目名称已复制至剪贴板',
							// 		icon: 'none'
							// 	});
							// }, 500)
						}
					});
				}else if(item.type == '负责人'){
					this.info.fzrName = item.name
					this.info.fzrId = item.id
				}
			},
			selectClick(item){
				this.info[this.pickField] = item.id
				this.info[this.pickFieldName] = item.name
			},
			confirmPick(e){
				this.pickShow = false
				this.info[this.pickField] = e.value[0].id
				this.info[this.pickFieldName] = e.value[0].name
			},
			confirm(e){
				this.info.rwTime = e[0]+'至'+e[1]
				this.info.beginTime = e[0]
				this.info.endTime = e[1]
				this.dateShow = false
			},
			timeConfirm(e){
				this.info[this.dateField] = e.value
				this.info[this.dateField+'Name'] = strFormatMinutes(e.value)
				this.dateShow = false
			},
			timeConfirm1(e){
				this.info[this.dateField] = e.value
				this.info[this.dateField+'Name'] = strFormatMinutes(e.value)
				this.dateShow1 = false
			},
			async afterRead(e){
				this.fileList = [...e.file,...this.fileList]
				this.upload(e.file[0].url)
			},
			async deletePic(e){
				this.fileList.splice(e.index,1)
			},
			async upload(url){
				const result = await uploadFile(url)
				this.info.fileList.push(result)
			},
		}
	}
</script>

<style>
	.card-plus-t {
		display: flex;
		flex-direction: row-reverse ; 
		justify-content: right;
		text-align: center;
		width: 100%;
	}
	.cc-t {
		margin: 5rpx;
	}
	.plus-style {
		border: 1rpx solid #ededed;
		padding: 15rpx;
		position: relative;
		height: 45rpx;
		border-radius: 15rpx;
	}
	.pers-list {
		display: flex;
		flex-direction: row;
		/* justify-content: right; */
	}
	.per-list {
		/* position: relative;
		text-align: center; */
		margin-right: 40rpx;
	}
	.pers-name {
		color: #a5a5a5;
		font-size: 25rpx;
		/* width: 50rpx; */
	}
	.pers-icon {
		position: relative;
		top: -80rpx;
		left: 88rpx;
	}
	.user-t {
		margin: 5rpx;
	}
	.span-style {
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		color: red;
		font-size: 50rpx;
		width: 20rpx;
		height: 20rpx;
		line-height: 35rpx;
		text-align: center;
	}
	.all-users {
		position: relative;
		left: 10%;
	}
</style>
<style>
	/* ::v-deep .u-form-item__body__right {
		flex-direction: column !important;
	} */
</style>
